<template>
  <div class="wrapper">
    <div class="sidebar">
        <div class="avatar" v-if="isAvatar">
            <div class="avatar-con">
                <img src="../assets/liming.jpg" alt="">
            </div>
        </div>
        <div class="navigation">
            <ul class="list">
                <li v-for="item of navigationData" :key="item.id" 
                    class="item"
                    :class="[item.id == sidebarIsActive ? 'active' : '']"
                    @click="sidebarNavigation(item.id)"
                >
                    <a href="javascript:;" >{{item.content }}</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="main-container">
        <div class="main-header">
            <span class=" headspan header-title"> {{ headerTitle }}</span>
            <span class=" headspan stops" @click="signOut">
                <img src="../assets/guanbi.png" alt="关闭">
            </span>
            <span class=" headspan stops" style="width: 100px">
                {{ isLoginUser.name }} 
            </span>
        </div>
        <div class="main-content">
            <router-view :key="key"></router-view>
        </div>
    </div>
  </div>
</template>

<script>
import router from '@/router';
import axios from 'axios';
import { ElMessage} from 'element-plus';
import { useRouter } from "vue-router";

export default {
    name: "Admin",
    setup(){
        let isLoginUser ={ name: '请登录' };
            const router = useRouter();

        if(sessionStorage.getItem('isLogin') == null || sessionStorage.getItem('isLogin') == false){
            ElMessage.error('当前系统未登录,自动跳转登录页面');
            setTimeout(() => {
                // router.push('/login')
            }, 3000);
            return { isLoginUser };
        };

    
        isLoginUser = {
            ...JSON.parse(sessionStorage.getItem('username'))
        }

        return { isLoginUser };    
    },
    data(){
        return{
            isAvatar: true,
            navigationData:[
                {
                    id: 1,
                    content: "账号管理"
                },
                {
                    id: 2,
                    content: "考勤管理"
                },
                {
                    id: 3,
                    content: "坐标管理"
                },
                {
                    id: 4,
                    content: "个人信息"
                }
                ],
            sidebarIsActive: 1,
        }
    },
    methods:{
        // 切换侧边栏
        sidebarNavigation(index){
            if(index == this.sidebarIsActive){
                return;
            }{
                const itemIndex = index;
                this.sidebarIsActive= itemIndex;
                switch(itemIndex){
                    case 1:
                        router.push('/Admin');
                        break;
                    case 2: 
                        router.push('/AttendanceAdmin');
                        break;
                    case 3:
                        router.push('/CoordinateAdmin');
                        break;
                    case 4:
                        router.push('/psersonInfo');
                    default:
                        break;
                        
                }
            }

           
            
        },
        // 退出登录请求
        signOut(){
            let exit = confirm('确认退出吗？');
            if(exit){
                this.$router.push('/login');
                this.$store.commit('SIGN_OUT');

                axios({
                    method: 'post',
                    baseURL: '/api',
                    url: '/user/logout'
                }).then(resolve => {
                })
            }else{
                return;
            }
        }
    },
    computed: {
        headerTitle(){
            return this.navigationData[this.sidebarIsActive - 1].content;
        },
        key () {
            return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
        }
    }
}
</script>

<style lang="scss">

    ul,li{
        padding: 0;
        margin: 0;
        list-style: none;
    }

    a{
        text-decoration: none;
    }

    .wrapper{
        position: relative;
        height: 100%;
        width: 100%;

         .sidebar{
            position: absolute;
            left: 0;
            right: 0;
            width: 200px;
            height: 100%;
            background-color: #343744;
            box-sizing: border-box;

            .avatar{
                width: 100%;
                height: 200px;
                padding: 40px;
                box-sizing: border-box;

                .avatar-con{
                    widows: 100%;
                    height: 100%;
                    background-color: #ffffff;
                    border-radius: 50%;
                    overflow: hidden;

                    img{
                        width: 100% ;
                    }

                
                }
                }

            .navigation{
                width: 100%;

                .list{
                    .item{
                        width: 100%;
                        height: 40px;
                        padding-left: 50px;
                        line-height: 40px;
                        box-sizing: border-box;
                        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
                        
                        &.active{
                            background-color: #ffc200;

                            a{
                                color: #333;
                            }
                        }
                        

                        a{
                            display: block;
                            height: 40px;
                            line-height: 40px;
                            font-size: 16px;
                            color: #BFCBD9;
                        }
                    }
                }
            }  

            
        }

        .main-container{
            position: absolute;
            left: 200;
            right: 0;
            height: 100%;
            width: calc(100% - 200px);
            background-color: #ffffff;
            box-sizing: border-box;

            .main-header{
                width: 100%;
                height: 70px;
                background-color: #ffffff ;
                clear: both;


                .headspan{
                    display: inline-block;
                    height: 70px;
                    line-height: 70px;


                    &.header-title{
                        width: 120px;
                        text-align: center;
                        font-size: 16px;
                        font-weight: 700;
                    }

                    &.stops{
                        float: right;
                        width: 70px;
                        height: 100%;
                        padding: 10px;
                        box-sizing: border-box;

                        img{
                            width: 100%;
                        }                     
                    }

                }




            }

            .main-content{

                width: 100%;
                height: calc(100% - 70px);
                background-color: #F6F6F5;
                box-sizing: border-box;
                padding: 20px;       
                
            }
        }
    }
   
</style>